<template>
  <ee-popup ref="root" overlay="5" :on-show="onShow" class="ee-loading fc" p="0">
    <Teleport to="body" v-if="delaying">
      <div v-overlay.full.hidden="{ value: true }" />
    </Teleport><template v-else />
    <slot name="loading">
      <ee-svg-loading />
    </slot>
    <slot>
      <b v-if="title">{{ title }}</b>
    </slot>
  </ee-popup>
</template>

<script type="text/javascript">
import { props } from './ee-loading'
import refs from '../__mixin/relation/refs'
import { injectStore } from 'ee-vuex'

/**
 * 插槽
 * @property {} loading - 加载图标
 * @property {} default - 内容
 */
export default injectStore({
  name: "ee-loading",
  extends: refs,
  data() {
    return {
      delaying: false,
      _delayTimer: undefined,
    }
  },
  props,
  methods: {
    onShow() {
      if (this.delay) {
        return new Promise(r => {
          this.delaying = true;
          if (this._delayTimer)
            clearTimeout(this._delayTimer);
          this._delayTimer = setTimeout(() => {
            this.delaying = false;
            r(true);
          }, this.delay)
        })
      }
    },
  },
})
</script>

<style lang="scss">
.ee-loading {
  color: var(--primary0);
}
</style>